<template>
	<view class="content">
		<image src="@/static/img/details_img.png" mode="widthFix"></image>
		<view class="q_btn" @click="qinz()">清账免还</view>
		<view class="info">
			<view class="title">{{info.usage}}</view>
			<view class="item">
				<view>借款金额</view>
				<view>￥{{info.borrow_amount}}</view>
			</view>
			<view class="item">
				<view>已还金额</view>
				<view class="col_red">{{info.pay_money}}元</view>
			</view>
			<view class="item">
				<view>下一个还款日</view>
				<view>{{info.next_date}}</view>
			</view>
			<view class="item">
				<view>借款期限</view>
				<view>{{info.repay_time}}</view>
			</view>
			<view class="item">
				<view>还款方式</view>
				<view>{{info.h_text}}</view>
			</view>
			<view class="item">
				<view>本期还款</view>
				<view>{{info.this_repay}}元</view>
			</view>
			<view class="item">
				<view>本期已还</view>
				<view>{{info.true_repay_money}}元</view>
			</view>
			<view class="item">
				<view>本期待还</view>
				<view class="col_red">{{info.next_need_money}}元</view>
			</view>
		</view>
		<view class="i_btns">
			<view class="" @click="huan(2)">提前还款</view>
			<view class="" @click="huan(1)">还款</view>
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="box box1">
				<!-- <view class="title">温馨提示</view> -->
				<view class="h_price mt_19">全部应还金额：<text>￥{{tiInfo.ti_huan_money}}</text></view>
				<input class="" type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd" />
				<view class="text">提前还款会将借款一次性还清，并计算违约金!</view>
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="yes2(2)">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" background-color="#fff" @change="change">
			<view class="box box2">
				<image src="@/static/img/diong3.png" mode="widthFix"></image>
				<view v-if="type==1" class="h_price">本期应还金额：<text>￥{{info.next_need_money}}</text></view>
				<view v-if="type==2" class="h_price">提前还款金额：<text>￥{{tiInfo.self_money}}</text></view>
				<!-- <view v-if="type==2" class="h_ying">
					<view class="h_price">应还本金：<text>￥{{tiInfo.ti_huan_money}}</text></view>
					<view class="h_price">应还利息：<text>￥{{tiInfo.ti_huan_money}}</text></view>
				</view> -->
				<view class="flex_d">
					<view class="text2">
						<image src="@/static/img/box_1.png" mode="widthFix"></image>
						实际还款金额
					</view>
					<view v-if="type==1" class="h_price">剩余金额：<text>￥{{money>0?(info.next_need_money - money):0}}</text></view>
				</view>
				<input type="number" placeholder="请输入还款金额" v-model="money" />
				<view class="text2" v-if="type==2">
					<image src="@/static/img/box_4.png" mode="widthFix"></image>
					后续每期利息
				</view>
				<input v-if="type==2" placeholder="请输入利息" type="number" v-model="interest" />
				<view class="text2">
					<image src="@/static/img/box_2.png" mode="widthFix"></image>
					二级密码
				</view>
				<input type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd" />
				<!-- <view v-if="type==2" class="text">提前还款将重新计算利息！</view> -->
				<view class="radio" v-if="type==1" @click="is_no = !is_no">
					<uni-icons v-if="is_no" type="checkbox-filled" color="#E99552"
						size="24"></uni-icons>
					<uni-icons v-else type="circle" color="#999999" size="24"></uni-icons>
					<text>剩余免还</text>
				</view>
				<view class="btns">
					<view class="" @click="cancel">取消</view>
					<view class="" @click="yes2(1)">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 清账免还弹窗 -->
		<uni-popup ref="popup3" background-color="#fff" @change="change">
			<view class="box box1">
				<!-- <view class="title">温馨提示</view> -->
				<view class="text3">确认用户不需还本期借款吗？</view>
				<input class="" type="safe-password" placeholder="请输入二级密码" password="true" v-model="payPsd" />
				<view class="btns">
					<view class="" @click="cancel()">取消</view>
					<view class="" @click="psdYn()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		huanKuan,
		payPassword,
		tiQian,
		jieQin,
		tiqianHuan,
		tiqianHuankuan
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				info: '',
				payPsd: '',
				money: '',
				type: '',
				tiInfo: '',
				is_no: false,
				interest: '',
			}
		},
		onLoad(e) {
			this.info = JSON.parse(e.info)
			console.log(this.info);
			uni.setNavigationBarTitle({
				title: this.info.name + ' 借款' + this.info.borrow_amount + '元'
			})
		},
		methods: {
			psdYn() {
				payPassword({
					paypassword: this.payPsd
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.mianHuan()
					} else {
						this.payPsd = ''
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			mianHuan() {
				this.cancel()
				jieQin({
					ids: this.info.id,
					type: 2		//1坏账 2免还
				}).then(res => {
					this.payPsd = ''
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				})
			},
			qinz() {
				this.$refs.popup3.open('center')
			},
			yes() {
				var hint
				// console.log(this.money,this.sum,this.money>this.sum);
				if (!this.money) hint = '请输入实际还款金额'
				else if (!hint && parseFloat(this.money) > parseFloat(this.info.next_need_money) && this.type == 1)
					hint = '请输入正确还款金额'
				else if (!hint && parseFloat(this.money) > parseFloat(this.tiInfo.ti_huan_money) && this.type == 2)
					hint = '请输入正确还款金额'
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none'
					})
					return
				}
				huanKuan({
					deal_id: this.info.id,
					// ids: 'all'
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				})
			},
			yes2(e) {
				this.cancel()
				payPassword({
					paypassword: this.payPsd
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						if (this.type == 1) {
							this.affirm()
						} else if (this.type == 2) {
							this.affirm2(e)
						}

					} else {
						this.payPsd = ''
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			huan(e) {
				this.type = e
				if (e == 2) {
					tiQian({
						deal_id: this.info.id
					}).then(res => {
						this.tiInfo = res.data
						console.log(res);
					})
					if (this.info.loantype == 2) {
						uni.showToast({
							title: '到期还本息不能提前还款！',
							icon: 'none'
						})
					} else if (this.info.loantype == 1) {
						this.$refs.popup2.open('center')
					} else if (this.info.loantype == 0) {
						this.$refs.popup.open('center')
					}
				} else {
					this.$refs.popup2.open('center')
				}
			},
			ahead() {
				this.$refs.popup.open('center')
			},
			affirm2(e) {
				var hint
				// console.log(this.money,this.sum,this.money>this.sum);
				if ((this.type == 1 && !this.money) || (this.type == 2 && this.info.loantype == 1 && !this.money))
					hint = '请输入实际还款金额'
				// else if (!hint && parseFloat(this.money) > parseFloat(this.info.next_need_money) && this.type == 1)
				// 	hint = '请输入正确还款金额'
				// else if (!hint && parseFloat(this.money) > parseFloat(this.tiInfo.ti_huan_money) && this.type == 2)
				// 	hint = '请输入正确还款金额'
				if (hint) {
					uni.showToast({
						title: hint,
						icon: 'none'
					})
					return
				}
				tiqianHuankuan({
					deal_id: this.info.id,
					real_money: e == 1 ? this.money : this.tiInfo.ti_huan_money,
					interest: this.interest
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					}

				})
			},
			affirm() {
				huanKuan({
					ids: this.info.ids,
					real_money: this.money,
					is_mian: this.is_no ? 1 : 0
					
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				})
				// uni.navigateTo({
				// 	url: '/pages/me/repayAffirm'
				// })
			},
			cancel() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
				this.$refs.popup3.close()
			},
			change() {},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		overflow: hidden;

		>image {
			display: block;
			width: 424rpx;
			margin: 80rpx auto 30rpx;
		}
	}
	
	.q_btn {
		width: 196rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #E99552;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto 60rpx;
	}

	.info {
		margin: 0 30rpx 40rpx;
		padding: 30rpx 30rpx 70rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;

		.title {
			font-weight: 700;
			font-size: 32rpx;
		}

		.item {
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EEEEEE;

			view {
				&:nth-of-type(2) {
					font-weight: 500;
				}
			}
		}
	}

	.col_red {
		color: #FF534E;
	}

	.i_btns {
		display: flex;
		justify-content: space-between;
		margin: 80rpx 70rpx;

		view {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;

			&:nth-of-type(1) {
				background: #E99552;
			}

			&:nth-of-type(2) {
				background: linear-gradient(270deg, #FF5F3B 0%, #FF524F 100%);
			}
		}
	}

	.box1 {
		width: 600rpx;
		height: 552rpx;
		background: url('@/static/img/diong.png') no-repeat;
		background-size: contain;
	}

	.box2 {

		width: 650rpx;
		// height: 896rpx;
		background-color: white;
		border-radius: 22rpx;

		image {
			width: 650rpx;
			display: block;
		}

		input {
			margin-bottom: 30rpx !important;
		}

		.btns {

			view {
				margin-top: 22rpx !important;
			}
		}

		// background: url('@/static/img/diong2.png') no-repeat;
	}

	.box {
		overflow: hidden;

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			margin: 180rpx 0 52rpx;
		}

		.h_price {
			margin: 30rpx 40rpx 40rpx;

			text {
				color: #FF5B5B;
				font-weight: 700;
				font-size: 32rpx
			}
		}

		.h_ying {
			display: flex;
			justify-content: space-between;
			margin: -16rpx 40rpx 40rpx;

			.h_price {
				margin: 0;
				font-size: 25rpx;

				text {
					font-weight: 500;
					font-size: 25rpx
				}
			}
		}

		.flex_d {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.h_price {
				margin: 0 40rpx 20rpx 0;
				font-size: 25rpx;

				text {
					font-weight: 500;
					font-size: 25rpx
				}
			}
		}
		
		.radio {
			display: flex;
			margin: 0 40rpx 30rpx;
			align-items: center;
			text:last-child {
				color: #666666;
				margin-left: 12rpx;
				font-size: 26rpx;
			}
		}

		.text {
			margin: 0 40rpx 0;
			font-size: 25rpx;
			margin-top: 20rpx;
			color: red;
		}
		
		.text3 {
			margin-top: 200rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}

		input {
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 0 40rpx 20rpx;
			padding: 0 16rpx;
			border: 2rpx solid #F69D5E;
			font-size: 26rpx;
		}

		.uni-input-placeholder {
			color: #999999;
		}

		.inp2 {
			margin-top: 190rpx;
		}

		.mt_19 {
			margin-top: 160rpx;
			margin-bottom: 20rpx;
		}

		.text2 {
			margin: 0 40rpx 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;

			image {
				width: 48rpx;
				margin-right: 16rpx;
			}
		}

		.mt_96 {
			margin-top: 180rpx;
		}

		.btns {
			display: flex;
			justify-content: space-between;

			view {
				width: 220rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 40rpx;
				margin: 52rpx 40rpx;

				&:nth-of-type(1) {
					border: 2rpx solid #FFA19E;
					color: #FF534E;
				}

				&:nth-of-type(2) {
					background: linear-gradient(to right, #F69F60 0%, #FF706D 100%);
					color: white;
				}
			}
		}
	}

	/deep/ .uni-popup__wrapper {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>